<template>
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-active="this.$route.name">
            <el-menu-item :index="(m.id).toString()" v-for="m in Message" :key='m.id'
            :class="m.icon"
            @click="goto(m)"
            >{{m.msg}}
            </el-menu-item>
        </el-menu>
  </el-aside>
</template>

<script>
export default {
    name: 'AsidePage',
    data() {
        return {
            Message: [
                {id:1,msg:'发现音乐',icon:'iconfont icon-yinle2',name:'discovery'},
                {id:2,msg:'推荐歌单',icon:'iconfont icon-music_playlist',name:'recommend'},
                {id:3,msg:'最新音乐',icon:'iconfont icon-yinle3',name:'new'},
                {id:4,msg:'最新MV',icon:'el-icon-video-camera',name:'mv'}
            ]
        }
    },
    methods: {
        goto(m){
            this.$router.push({
                name: m.name
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el-aside{
    background-color: #f9f9f9 !important;
    height: 100%;
}
.el-menu-item{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: large;
}
</style>